<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form small-top">
        <div class="mainor_te">
          <!-- <router-link to="/purchasing/purchase/add" class="mainor_tea"
            >备货采购</router-link
          >
          <router-link to="/purchasing/purchase/list"
            ><el-button>询价记录</el-button></router-link
          > -->
          
        </div>
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="100px"
          id="form"
        >
          <el-form-item label="" prop="mode">
            <el-select
              v-model.trim="form.mode"
              placeholder="采购方式"
              class="wid100 methods"
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(modeList, index) in list.modeList"
                :key="index"
                :label="modeList"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="form.mode == 1"
              v-model.trim="form.buyer_id"
              placeholder="采购员"
              class="wid220 marginLeft5s"
              @change="getArticleList"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(buyer, index) in list.buyer"
                :key="index"
                :label="buyer"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="form.mode == 2"
              v-model.trim="form.supplier_id"
              placeholder="供应商"
              class="wid220 marginLeft5s"
              @change="getArticleList"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(supplier, index) in list.supplier"
                :key="index"
                :label="supplier"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="form.mode == 3"
              v-model.trim="form.direct_supply"
              placeholder="直供用户"
              class="wid220 marginLeft5s"
              @change="getArticleList"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(direct_supply, index) in list.direct_supply"
                :key="index"
                :label="direct_supply"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="!form.mode"
              v-model.trim="form_mode_all"
              placeholder="所有"
              class="wid220 marginLeft5s"
            >
              <el-option label="所有" value=""></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单号：" prop="order_sn">
            <el-input
              v-model.trim="form.order_sn"
              placeholder="单号"
              clearable
              class="wid220"
            ></el-input>
          </el-form-item>
          <el-form-item label="采购日期：" prop="createTime">
            <el-date-picker
              v-model="createTime"
              type="daterange"
              class="time220"
              :editable="false"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :clearable="false"
              :picker-options="pickerOptions"
              @change="getArticleList"
            />
          </el-form-item>
          <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="moredata">
            <el-button @click="exportb">导出</el-button>
          </MainFormBtn>
          <div class="more el-form-item" @click="more">
            <span>更多</span>
            <i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
          </div>
          <div class="clearfix"></div>
          <el-collapse-transition>
            <div v-show="moredata">
              <el-form-item label="创建日期：" prop="establishTime">
                <el-date-picker
                  v-model="establishTime"
                  type="daterange"
                  class="time220"
                  :editable="false"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  :clearable="false"
                  :picker-options="pickerOptions"
                  @change="getArticleList"
                />
              </el-form-item>
              <el-form-item label="单据状态：" prop="status">
                <el-select
                  v-model.trim="form.status"
                  placeholder="单据状态"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(statusList, index) in list.statusList"
                    :key="index"
                    :label="statusList"
                    :value="parseInt(index + 1)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="单据类型：" prop="type">
                <el-select
                  v-model.trim="form.type"
                  placeholder="单据类型"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(typeList, index) in list.typeList"
                    :key="index"
                    :label="typeList"
                    :value="parseInt(index)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="结算状态：" prop="pay_status">
                <el-select
                  v-model.trim="form.pay_status"
                  placeholder="结算状态"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option
                    v-for="(pay_status_list, index) in list.pay_status_list"
                    :key="index"
                    :label="pay_status_list"
                    :value="parseInt(index + 1)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="clearfix"></div>
              <el-form-item label="商品：" prop="goods_spu_id">
                <change-goods-input
                  ref="changeGoodsInput"
                  @clear="
                    () => {
                      this.form.goods_spu_id = '';
                    }
                  "
                  @sendValue="
                    (data) => {
                      this.form.goods_spu_id = data.id;
                    }
                  "
                ></change-goods-input>
              </el-form-item>
              <el-form-item label="发票类型：" prop="invoice_type">
                <el-select
                  v-model.trim="form.invoice_type"
                  placeholder="发票类型"
                  class="wid220"
                  @change="getArticleList"
                >
                  <el-option label="所有" value="null"></el-option>
                  <el-option
                    v-for="(pay_status_list, index) in list.invoice_type"
                    :key="index"
                    :label="!pay_status_list ? '不设置' : pay_status_list"
                    :value="parseInt(index)"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="clearfix"></div>
                <el-form-item label=" ">
                  <MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="!moredata">
                    <el-button @click="exportb">导出</el-button>
                  </MainFormBtn>
                </el-form-item>
            </div>
          </el-collapse-transition>
        </el-form>
      </div>
      <div class="main-controls-wrap">
        <div class="flex">
          <router-link to="/purchasing/purchase/add" class="mainor_tea">备货采购</router-link>
          <router-link to="/purchasing/purchase/list" class="mg-l-12">
            <el-button>询价记录</el-button>
          </router-link>
          <p class="mg-l-2" @click="batch(1)">
            <el-button>
              <div class="box">
                合并采购单
                <div
                  class="mainsu_te marginLeft5"
                  style="position: relative; margin-top: -3px"
                >
                  <el-tooltip class="item" effect="dark" placement="bottom">
                    <div slot="content">
                      注释：同一采购日期、采购方式、采购员或供应商，并且单据状态是待采购的才能合并
                    </div>
                    <svg
                      aria-hidden="true"
                      class="navbar_svg"
                      width="16"
                      height="16"
                    >
                      <use xlink:href="#icon-summary_question" />
                    </svg>
                  </el-tooltip>
                </div>
              </div>
            </el-button>
          </p>
          <p class="mg-l-2" @click="batch(2)">
            <el-button>批量取消</el-button>
          </p>
        </div>
        <div>
          <el-checkbox v-model="loock_canceled_purchase_list" @change="canceledChange">不显示已取消采购单</el-checkbox>
        </div>
      </div>
      <MainTable
        class="marginTop10"
        ref="multipleTable"
        showSelection
        :height="borderHeight"
        :loading="listLoading"
        :columns="purchaseColumns"
        :tableData="list.list.data"
        @selection-change="handleSelectionChange"
        :fieidList="list.field"
        @row-dblclick="rowDblclick"
      >
        <template #goods_code="{ row }">
          <span :class="`type${row.mode}`">{{ list.modeList[row.mode] }}</span>
        </template>
        <template #market="{ row }">
          <span>{{ row.mode == 1 ? (row.buyer ? row.buyer.name : "") : (row.supplier ? row.supplier.name : "") }}</span>
        </template>
        <template #type="{ row }">
          <span :class="`type${row.type}`">{{ list.typeList[row.type] }}</span>
        </template>
        <template #status="{ row }">
          <span :class="`order${row.status}`">{{ list.statusList[row.status] }}</span>
        </template>
        <template #footstatus="{ row }">
          <span :class="row.pay_status == 0 ? 'unpaid' : 'success'">{{ list.pay_status_list[row.pay_status] }}</span>
        </template>
        <template #created_at="{ row }">
          <span>{{ parseTime(row.created_at, "{y}-{m}-{d}") }}</span>
        </template>
        <template #purchase_time="{ row }">
          <span>{{ parseTime(row.purchase_time, "{y}-{m}-{d}") }}</span>
        </template>
        <template #jd="{ row }">
          <el-progress
            :text-inside="true"
            :stroke-width="15"
            :percentage="row.jd"
            status="success"
            color="#03A98E"
          ></el-progress>
        </template>
        <template #fp="{ row }">
          <span :class="`type${row.invoice_type}`">
            {{ list.invoice_type[row.invoice_type] || "不设置" }}
          </span>
        </template>
        <el-table-column
          label="管理操作"
          fixed="right"
          prop="operate"
          :width="tableWidth[hash+'operate'] || 240"
          class-name="main_hei handle"
        >
          <template slot="header">
            <table-header-setting @openHeader="dialogFormVisible = true"></table-header-setting>
          </template>
          <!-- status 状态  0 代采购 1  部分采购 2完成采购 3取消 -->
          <template slot-scope="scope">
            <router-link :to="'/purchasing/purchase/see/' + scope.row.id">
              <el-link type="success">查看</el-link>
            </router-link>

            <router-link
              :to="'/purchasing/purchase/record/' + scope.row.id"
              v-if="scope.row.status == 0 || scope.row.status == 1"
            >
              <el-link type="warning">录单</el-link>
            </router-link>

            <router-link
              :to="'/purchasing/purchase/edit/' + scope.row.id"
              v-if="scope.row.status == 0"
            >
              <el-link type="primary">编辑</el-link>
            </router-link>

            <router-link
              :to="'/purchasing/purchase/entry/' + scope.row.id"
              v-if="
                (scope.row.status == 1 || scope.row.status == 2) &&
                scope.row.mode != 3
              "
            >
              <el-link type="primary">入库单</el-link>
            </router-link>

            <el-link
              style="color: rgb(17, 138, 178)"
              @click="exportOrderiInfo(scope.row.id)"
              v-if="scope.row.status != 0 && scope.row.status != 1"
              >导出</el-link
            >
            <el-link
              @click="print(scope.row.id)"
              v-if="scope.row.status != 0 && scope.row.status != 1"
              >打印</el-link
            >

            <el-dropdown v-if="scope.row.status == 0 || scope.row.status == 1">
              <span class="el-dropdown-link" style="cursor: pointer">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-link
                    style="color: rgb(17, 138, 178)"
                    @click="exportOrderiInfo(scope.row.id)"
                    >导出</el-link
                  ></el-dropdown-item
                >
                <el-dropdown-item>
                  <el-link @click="print(scope.row.id)">打印</el-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-link
                    type="danger"
                    @click="delet(scope.row.id)"
                    v-if="scope.row.status == 0"
                    >取消</el-link
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </MainTable>
      <div class="main_num boxdq mg-t-10">
        <div class="main_num_l box">
          <p>今日简报：</p>
          <p>
            采购单数量：
            <em>{{ list.all }}</em>
          </p>
          <p>
            采购金额：
            <em>{{ list.all_money }}</em>
          </p>
          <p class="box" style="width: 400px; align-items: center">
            采购进度：
            <el-progress
              :text-inside="true"
              :stroke-width="14"
              :percentage="list.percent"
              status="success"
              color="#E47C02"
              style="width: 60%"
            ></el-progress>
          </p>
        </div>
        <!-- 分页 -->
        <div class="main_num_r">
          <MainPagination
            :current-page="current.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>
    <el-dialog
      title="表头设置"
      :visible.sync="dialogFormVisible"
      class="main_dialog dialog500"
      @close="type = list.field"
    >
      <div class="set_sort">
        <div class="set_none_show">
          <el-checkbox-group v-model="type">
            <el-checkbox
              v-for="(Header, index) in Header"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
              >{{ Header.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="set_header_sort">
          <div class="set_sort_ab">
            <draggable chosen-class="chosen" v-model="Header" animation="500">
              <transition-group>
                <li
                  class="set_sort_ab_border"
                  v-for="item in Header"
                  :key="item.id"
                >
                  <div>
                    <span class="el-icon-d-caret"></span>
                    <span>{{ item.name }}</span>
                  </div>
                  <svg-icon icon-class="index_move" />
                </li>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setupmine" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!--采购单导出  -->
    <el-dialog
      title="订单导出"
      :visible.sync="exportbuVisible"
      class="main_dialog dialog500"
    >
      <div class="dialog_padding20_30">
        <div v-if="selectArr.length == 0 ? true : false">
          <p class="exptitle">选择导出时间</p>
          <el-date-picker
            v-model="exportTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="datepicker"
          >
          </el-date-picker>
          <el-tooltip
            class="item"
            effect="dark"
            content="时间范围只能选择一个月之内"
            placement="bottom"
          >
            <i class="el-icon-question"></i>
          </el-tooltip>
          <div class="marginTop5">
            <p class="exptitle">采购方式</p>
            <el-select
              v-model.trim="exportMode"
              placeholder="采购方式"
              class="wid220"
            >
              <el-option label="所有" value=""></el-option>
              <el-option label="自采" value="1"></el-option>
              <el-option label="供应商" value="2"></el-option>
              <el-option label="直供户" value="3"></el-option>
            </el-select>
            <el-select
              v-show="exportMode == 1"
              v-model.trim="exportSET.buyer_id"
              placeholder="采购员"
              class="wid220"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(buyer, index) in list.buyer"
                :key="index"
                :label="buyer"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="exportMode == 2"
              v-model.trim="exportSET.supplier_id"
              placeholder="供应商"
              class="wid220"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(supplier, index) in list.supplier"
                :key="index"
                :label="supplier"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="exportMode == 3"
              v-model.trim="exportSET.direct_supply"
              placeholder="直供用户"
              class="wid220"
              filterable
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(direct_supply, index) in list.direct_supply"
                :key="index"
                :label="direct_supply"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
            <el-select
              v-show="!exportMode"
              v-model.trim="export_mode_all"
              placeholder="所有"
              class="wid220"
            >
              <el-option label="所有" value=""></el-option>
            </el-select>
          </div>
          <div class="marginTop5">
            <p class="exptitle">单据状态</p>
            <el-select
              v-model.trim="exportStatus"
              placeholder="单据状态"
              class="wid220"
            >
              <el-option label="所有" value=""></el-option>
              <el-option
                v-for="(statusList, index) in list.statusList"
                :key="index"
                :label="statusList"
                :value="parseInt(index + 1)"
              ></el-option>
            </el-select>
          </div>
          <div class="marginTop5">
            <p class="exptitle">发票类型</p>
            <el-select
              v-model.trim="exportInvoice_type"
              placeholder="发票类型"
              class="wid220"
            >
              <el-option label="所有" value="null"></el-option>
              <el-option
                v-for="(pay_status_list, index) in list.invoice_type"
                :key="index"
                :label="!pay_status_list ? '不设置' : pay_status_list"
                :value="parseInt(index)"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div v-if="selectArr.length == 0 ? false : true">
          <div class="purchaseTotal">
            已选择【 {{ `${selectArr.length}` }}】个采购单
          </div>
        </div>
        <div class="marginTop5">
          <el-checkbox v-model="goodspicker"
            >导出商品信息
            <el-tooltip
              class="item"
              effect="dark"
              content="默认不勾选，则不导出商品信息"
              placement="bottom"
            >
              <i class="el-icon-question"></i> </el-tooltip
          ></el-checkbox>
        </div>
        <div v-if="goodspicker">
          <p class="exptitle">选择导出商品字段信息</p>
          <el-checkbox-group v-model="exportHeaderType.goodsList">
            <el-checkbox
              v-for="(Header, index) in exportGoodsList"
              :key="index"
              :label="Header.id"
              :disabled="Header.disabled"
              >{{ Header.name }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="exportbuVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportConfirm" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 打印子组件 -->
    <order-print
      ref="printTemplate"
      v-show="false"
      id="printname"
    ></order-print>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import { getLodop } from "@/utils/LodopFuncs";
import {
  purchase_index,
  purchase_merge,
  purchase_cancel,
  purchase_cancelList,
  export_head_info,
  export_purchase_list,
  export_purchase_info,
} from "@/api/purchasing/purchasingPurchase";
import { field_getField } from "@/api/sort";
import { field_save, setting_company } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import dateOption from "@/options/dateOption";
import { parseTime, exportMethod } from "@/utils/index";
import exportList from "@/options/export";
import { order_export } from "@/api/order/orderList";
import OrderPrint from "@/views/order/orderPrint.vue";
import draggable from "vuedraggable";
import { purchaseColumns, sortColumns } from "./mockData.js";
export default {
  mixins: [mixins],
  components: {
    OrderPrint,
    draggable,
  },
  directives: {
    // 聚焦元素
    focus: {
      inserted(el) {
        el.querySelector("input").focus();
      },
    },
  },
  data() {
    return {
      purchaseColumns, // 表格
      // 时间
      parseTime,
      exportMethod,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 搜索
      form: {
        create_start_time: "",
        create_end_time: "",
        start_time: "",
        end_time: "",
        mode: null,
        order_sn: "",
        storehouse_id: null,
        status: null,
        buyer_id: null,
        supplier_id: null,
        direct_supply: null,
        type: null,
        pay_status: null,
        order_status: this.order_status ? 0 : 1,
        goods_spu_id: "",
        invoice_type: "",
      },
      form_mode_all: "",
      order_status: false,
      createTime: [],
      establishTime: [],
      pickerOptions: dateOption,
      loock_canceled_purchase_list: false,
      // 更多
      moredata: false,
      // 操作更多
      hanlemore: false,
      // 列表数据
      list: {
        list: {
          data: [],
        },
      },
      listLoading: false,
      // 全选
      selectArr: [],
      // 表头设置
      dialogFormVisible: false,
      type: [],
      Header: [
        {
          id: 1,
          name: "采购单号",
          disabled: true,
        },
        {
          id: 2,
          name: "采购方式",
          disabled: false,
        },
        {
          id: 3,
          name: "采购员/供应商",
          disabled: false,
        },
        {
          id: 4,
          name: "类型",
          disabled: false,
        },
        {
          id: 5,
          name: "状态",
          disabled: false,
        },
        {
          id: 6,
          name: "采购金额",
          disabled: false,
        },

        {
          id: 7,
          name: "其他金额",
          disabled: false,
        },
        {
          id: 8,
          name: "采购合计",
          disabled: false,
        },
        {
          id: 9,
          name: "结算状态",
          disabled: false,
        },
        {
          id: 10,
          name: "创建日期",
          disabled: false,
        },
        {
          id: 11,
          name: "采购日期",
          disabled: true,
        },
        {
          id: 12,
          name: "备注",
          disabled: false,
        },
        {
          id: 13,
          name: "采购品种",
          disabled: false,
        },
        {
          id: 14,
          name: "已采购品种",
          disabled: false,
        },
        {
          id: 15,
          name: "采购进度",
          disabled: false,
        },
        {
          id: 16,
          name: "发票类型",
          disabled: false,
        },
      ],

      // 采购单导出
      exportbuVisible: false,
      goodspicker: true, //商品信息 true
      exportGoodsList: exportList.purchaseGoodsList,
      // 默认的导出表头信息
      exportHeaderType: {
        goodsList: [],
      },
      // 订单导出时间
      exportTime: [],
      exportMode: "",
      exportStatus: "",
      exportInvoice_type: null,
      exportSET: {
        buyer_id: "",
        supplier_id: "",
        direct_supply: "",
      },
      export_mode_all: "",
    };
  },
  watch: {
    "form.mode": {
      handler(val) {
        if (val == 1) {
          this.form.supplier_id = null;
          this.form.direct_supply = null;
        } else if (val == 2) {
          this.form.buyer_id = null;
          this.form.direct_supply = null;
        } else if (val == 3) {
          this.form.supplier_id = null;
          this.form.buyer_id = null;
        } else if (!val) {
          this.form.supplier_id = null;
          this.form.buyer_id = null;
          this.form.direct_supply = null;
        }
      },
      deep: true,
    },
    exportMode: {
      handler(val) {
        if (val == 1) {
          this.exportSET.supplier_id = "";
          this.exportSET.direct_supply = "";
        } else if (val == 2) {
          this.exportSET.buyer_id = "";
          this.exportSET.direct_supply = "";
        } else if (val == 3) {
          this.exportSET.supplier_id = "";
          this.exportSET.buyer_id = "";
        } else if (!val) {
          this.exportSET.supplier_id = "";
          this.exportSET.buyer_id = "";
          this.exportSET.direct_supply = "";
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.sort_data();
  },
  // 刷新
  inject: ["reload"],
  methods: {
    //  表格双击跳转详情页面
    rowDblclick(row, column, event) {
      this.$router.push('/purchasing/purchase/see/' + row.id)
    },
    //排序
    sort_data() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 7 }
      );
      field_getField(data).then((res) => {
        let arry = JSON.parse(res.data.info.sort);
        if (arry || arry.length) {
          this.Header.sort((a, b) => {
            return arry.indexOf(a.id) - arry.indexOf(b.id);
          });
        }
      });
    },
    // 勾选
    canceledChange(val) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, {
                loock_canceled_purchase_list: val ? 1 : 0,
              })
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { loock_canceled_purchase_list: val ? 1 : 0 }
      );
      setting_company(data).then((res) => {
        if (res.errcode == 0) {
          this.purchase_index();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 批量
    batch(type) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { ids: JSON.stringify(this.selectArr) }
      );
      if (this.selectArr.length != 0) {
        if (type == 1) {
          this.$confirm(
            "已选择" + this.selectArr.length + "个采购单，确定合并吗?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              purchase_merge(data).then((res) => {
                if (res.errcode == 0) {
                  this.$message({
                    message: "合并成功",
                    type: "success",
                  });
                  this.purchase_index();
                } else {
                  this.$message.error(res.errmsg);
                }
              });
            })
            .catch(() => {});
        } else {
          this.$confirm(
            "已选择" +
              this.selectArr.length +
              "个采购单，取消后不能恢复，确定取消吗?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              purchase_cancel(data).then((res) => {
                if (res.errcode == 0) {
                  this.$message({
                    message: "取消成功",
                    type: "success",
                  });
                  this.purchase_index();
                } else {
                  this.$message.error(res.errmsg);
                }
              });
            })
            .catch(() => {});
        }
      } else {
        this.$message.error("请勾选采购单");
      }
    },
    // 导出
    exportb() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, this.list_form())) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form()
      );
      export_head_info(data).then((res) => {
        if (res.errcode == 0) {
          this.exportHeaderType.goodsList = res.data.list.type_12;
        }
        this.exportbuVisible = true;
      });
    },
    // 导出时间范围
    datepicker(val) {
      let start = "";
      let end = "";
      if (val) {
        start = new Date(val[0]).getTime();
        end = new Date(val[1]).getTime();
        if (end - start > 30 * 24 * 60 * 60 * 1000) {
          this.$message.error("选择范围不能超过一个月，请重新选择");
          this.exportTime = "";
        }
      }
    },
    // 导出确认
    exportConfirm() {
      let goodsList = [];
      this.exportGoodsList.map((e) => {
        this.exportHeaderType.goodsList.map((p) => {
          if (e.id == p) {
            goodsList.push(e.id);
            return;
          }
        });
      });
      let ids = [];
      if (this.selectArr.length > 0) {
        this.selectArr.forEach((item) => {
          ids.push(item.id);
        });
        this.exportTime = "";
      }
      let time = "";
      if (this.exportTime) {
        time = this.exportTime.join(" ");
      }

      let form = {
        ids: ids ? ids.join("-") : "",
        list_head: goodsList.join("-"),
        send_time: time,
        mode: this.exportMode,
        status: this.exportStatus,
        goodspicker: this.goodspicker ? 1 : 0,
        invoice_type: this.exportInvoice_type,
        ...this.exportSET,
      };
      if (form.mode == 1 || form.mode == 3) {
        delete form.supplier_id;
      } else if (form.mode == 2) {
        delete form.buyer_id;
      }
      if (form.direct_supply) {
        form.supplier_id = form.direct_supply;
      }
      delete form.direct_supply;
      if (ids.length == 0) {
        delete form.ids;
      }
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, form)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        form
      );
      if (!data.send_time && !data.ids) {
        this.$message.warning("请选择导出的时间段或导出的订单");
        return false;
      }
      let data1 = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 12 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        {
          type: 12,
          fields: JSON.stringify(goodsList),
        }
      );
      field_save(data1).then((res) => {
        if (res.errcode != 0) {
          this.$message.error("导出表头设置失败");
        }
      });
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      export_purchase_list(data).then((res) => {
        this.exportMethod(res, "采购单", notify);
      });
      this.exportbuVisible = false;
    },
    // 监听全选
    handleSelectionChange(val) {
      this.selectArr = [];
      val.map((item) => {
        this.selectArr.push({ id: item.id });
      });
    },
    startGetting() {
      this.getSearchFor();
    },
    // 点击搜索时将搜索信息折叠起来
    getSearchFor() {
      this.getArticleList();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.purchase_index();
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.form.supplier_id = null;
      this.form.buyer_id = null;
      this.form.direct_supply = null;
      if (this.$refs["changeGoodsInput"]) {
        this.$refs["changeGoodsInput"].name = "";
      }
      this.createTime = [];
      this.establishTime = [];
      this.getArticleList();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.purchase_index();
    },
    changePage(page) {
      this.current.page = page;
      this.purchase_index();
    },
    // 设置确认
    setupmine() {
      let arry = [];
      let arrys = [];
      this.Header.map((e) => {
        this.type.map((p) => {
          if (e.id == p) {
            arry.push(e.id);
            return;
          }
        });
      });
      this.Header.map((item) => {
        arrys.push(item.id);
      });
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: 7 })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: 7, fields: JSON.stringify(arry), sort: JSON.stringify(arrys) }
      );
      field_save(data).then((res) => {
        if (res.errcode == 0) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.reload();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 取消
    delet(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { id: id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      this.$confirm("是否取消采购单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          purchase_cancelList(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "取消成功",
                type: "success",
              });
              this.purchase_index();
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
        .catch(() => {});
    },
    // 列表
    purchase_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      purchase_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.type = res.data.field;
          res.data.list.data.map((e) => {
            e.cg = e.purchase_list.length;
            let gs = 0;
            e.purchase_list.map((p) => {
              if (p.status == 1) {
                gs++;
              }
            });
            e.yc = gs;
            e.jd = parseInt((gs / e.purchase_list.length) * 100);
          });

          this.list = res.data;

          this.purchaseColumns = sortColumns(this.purchaseColumns, res.data.field);
          let percent = parseFloat(res.data.percent).toFixed(2);
          this.list.percent = parseFloat(percent);
          this.totalCount = res.data.list.total;
          this.loock_canceled_purchase_list =
            res.data.loock_canceled_purchase_list == 1 ? true : false;
          this.$nextTick(() => {
            // myTable是表格的ref属性值
            if (this.$refs.multipleTable && this.$refs.multipleTable.doLayout) {
              this.$refs.multipleTable.doLayout();
            }
          });
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      if (form.direct_supply) {
        form.supplier_id = form.direct_supply;
      }
      form.start_time = this.createTime[0] ? this.createTime[0] : "";
      form.end_time = this.createTime[1] ? this.createTime[1] : "";
      form.create_start_time = this.establishTime[0]
        ? this.establishTime[0]
        : "";
      form.create_end_time = this.establishTime[1] ? this.establishTime[1] : "";
      delete form.direct_supply;
      return form;
    },
    // 打印
    print(id) {
      this.printid = id;
      this.$refs.printTemplate.$emit("demo", { id: id, type: "purchase" });
    },
    // 导出
    exportOrderiInfo(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: id }
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      export_purchase_info(data)
        .then((res) => {
          this.exportMethod(res, "采购单", notify);
        })
        .catch(() => {
          this.$message.error("导出失败");
        });
    },
  },
  activated() {
    if (this.$route.params.id) {
      this.form.status = parseInt(this.$route.params.id);
      let time = this.parseTime(new Date(), "{y}-{m}-{d}");
      this.createTime = [time, time];
    }
    if (this.$route.params.day) {
      let time = this.parseTime(this.$route.params.day, "{y}-{m}-{d}");
      this.createTime = [time, time];
    }
    if (this.$route.params.mode) {
      this.form.mode = this.$route.params.mode;
    }
    if (this.$route.params.supplier_id) {
      this.form.supplier_id = this.$route.params.supplier_id;
    }
    if (this.$route.params.buyer_id) {
      this.form.buyer_id = this.$route.params.buyer_id;
    }

    // 列表
    this.purchase_index();
  },
  created() {
    this.getNumerical(200);
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.mainor_form form {
  width: 100%;
}
.day_box {
  display: flex;
  // align-items: flex-end;
  flex-direction: row-reverse;
}
// 导出订单表头
.exptitle {
  display: block;
  font-size: 16px;
  color: #000000;
  margin: 0 0 8px;
}
.marginTop5 {
  /deep/.el-checkbox__label {
    font-size: 16px;
  }
}
.purchaseTotal {
  font-size: 16px;
  padding: 10px 0;
}
.margintop {
  padding-top: 15px;
}
.el-checkbox-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .el-checkbox {
    width: 35%;
  }
}
/deep/.main_table .el-table--small td.handle .cell {
  display: flex;
  flex-direction: row;
  align-items: center;
}
/deep/ .el-progress-bar__innerText {
  transform: translateY(-1px);
}

.wid100 {
  width: 100px;
}

.marginLeft5s {
  margin-left: -5px;
}
/deep/.methods .el-input__inner {
  border: none;
}
// 支付状态
.success {
  color: $green;
}
.unpaid {
  color: $colour_red;
}

// 状态
.order1 {
  color: $order_color1;
}
.order2 {
  color: $order_color2;
}
.order3 {
  color: $order_color4;
}
.order4 {
  color: $order_color4;
}
.type2 {
  color: #03a98e;
}
.type1 {
  color: #118ab2;
}
.type3 {
  color: #aacd6e;
}
/deep/.el-dialog__body {
  padding: 0;
}
/deep/.set_header_sort {
  min-width: 200px;
}
/deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
</style>
